<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css">
        .list_con {
            width: 600px;
            margin: 50px auto 0;
        }
        
        .inputtxt {
            width: 550px;
            height: 30px;
            border: 1px solid #ccc;
            padding: 0px;
            text-indent: 10px;
        }
        
        .inputbtn {
            width: 40px;
            height: 32px;
            padding: 0px;
            border: 1px solid #ccc;
        }
        
        .list {
            margin: 0;
            padding: 0;
            list-style: none;
            margin-top: 20px;
        }
        
        .list li {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }
        
        .list li span {
            float: left;
        }
        
        .list li a {
            float: right;
            text-decoration: none;
            margin: 0 10px;
        }
    </style>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript">
        window.onload = function() {

            // vue 插件提示 Vue 2 Snippets
            var vm = new Vue({
                el: '.list_con',
                data: {
                    inputContent: "",
                    dataList: ['学习html', '学习css', '学习jquery', '学习js', '学习Vue']
                },
                methods: {
                    fnAdd: function() {

                    },
                    fnUp: function() {},
                    fnDown: function() {},
                    fnDel: function() {}
                },
            })
        }
    </script>
</head>

<body>

    <div class="list_con">
        <h2>To do list</h2>

        <input v-model="inputContent" type="text" name="" id="txt1" class="inputtxt">

        <input v-on:click="fnAdd" type=" button " name=" " value="增加 " id="btn1 " class="inputbtn ">

        <ul id="list " class="list ">

            <li v-for="item in dataList">
                <span>{{ item }}</span>
                <a @click="fnUp" href=" javascript:; " class="up "> ↑ </a>
                <a @click="fnDown" href="javascript:; " class="down "> ↓ </a>
                <a @click="fnDel" href=" javascript:; " class="del ">删除</a>
            </li>
            <!-- <li><span>学习css</span><a href="javascript:; " class="up "> ↑ </a><a href="javascript:; " class="down "> ↓ </a><a href="javascript:; " class="del ">删除</a></li>
            <li><span>学习javascript</span><a href="javascript:; " class="up "> ↑ </a><a href="javascript:; " class="down "> ↓ </a><a href="javascript:; " class="del ">删除</a></li> -->

        </ul>

    </div>
</body>

</html>